<template>
    <view class="featured clearfix">
        <view class="title">
            <text class="h1">美食推荐</text><text class="desc">最具美味的推荐</text>
        </view>
        <view class="line"></view>
        <view class="content-item" @click="navto(item.id)" v-for="(item,index) in List" :Key="index">
            <view class="left">
                <image class="left-img" :src="item.img" mode="aspectFit"></image>
            </view>
            <view class="right">
                <view class="title">{{item.title}}</view>
                <view class="info">
                    <text class="nums">{{item.read}}人阅读</text>/
                    <text class="date">  {{item.date}}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default{
        data(){
            return{
                List:[
                    {
                        id:"1",
                        img:"http://newscover-zj.tourzj.com/2018/10/18/c9589723703168b3ee1c5c301324b3cc453979.jpeg!300X300",
                        title:"茶能醉人何需酒？这般肆意的春天，就该到山里喝茶去",
                        read:"14335",
                        date:"2020-06-19"
                    },
                    {
                        id:"2",
                        img:"http://newscover-zj.tourzj.com/2018/03/27/092830eea048ac1d34b4ef75c4c3215b7a745e.jpg!300X300",
                        title:"没尝过浙40种街头美食，还好意思自称吃货？",
                        read:"14855",
                        date:"2020-06-19"
                    },
                ]
            }
        },
        methods:{
            navto(id){
                uni.navigateTo({
                    url: "/pages/recom/RecomDetail"
                });
            }
        }
    }
</script>

<style>
    .line{
        height: 1px;
        background-color: #efefef;
        margin-bottom: 20px;
    }
    .featured{
        margin: 10px 10px;
    }
    .title{
        margin: 20px 0;
    }
    .h1{
        border-left: 5px solid #007AFF;
        font-size: 15px;
        padding: 0 10px;
    }
    .desc{
        margin-left: 10px;
        font-size: 12px;
        color: #ccc3c6;
    }
    .clearfix:after{
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .clearfix{
        *zoom: 1;
    }
    .content-item{
        display: flex;
        padding-bottom:20px;
        margin-bottom: 20px;
        border-bottom: 1px solid #efefef;
    }
    .left-img{
        height: 5.5rem;
        width: 5.5rem;
        margin: 5px;
    }
    .right{
        margin: 0 5px;
    }
    .title{
        font-size: 14px
    }
    .info{
        font-size: 10px;
    }
    .nums{
        margin: 7px 7px 7px 0;
    }
    .date{
        margin: 7px;
    }
</style>
